<template>
  <div>
    <p style="margin: 10px; font-size: 15px">欢迎您! {{this.user1.nickname}}</p>
    <el-row style="margin-bottom: 25px">
      <el-col :span="8" >
        <el-card style="background-color: #409EFF;width: 419px;height: 150px;border-radius: 3%">
          <h2 style="margin: 0">权限管理</h2>
          <div style="margin: 0;margin-top: 5px;color: black">Authority Management</div>
          <i class="el-icon-edit" style="position:relative;right: -350px;top:-20px;font-size: 30px"></i>
          <el-button type="primary" plain style="opacity:0.5;position: relative;
          bottom: -19px;left:-20px;width: 429px" @click="toData1">&nbsp;&nbsp;&nbsp;<i class="el-icon-position" style="font-size: 15px"></i>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-button>
        </el-card>
      </el-col>
      <el-col :span="8" >
        <el-card style="background-color: #67C23A;width: 419px;height: 150px;border-radius: 3%">
          <h2 style="margin: 0">数据报表</h2>
          <div style="margin: 0;margin-top: 5px;color: black">Data and Result</div>
          <i class="el-icon-s-data" style="position:relative;right: -350px;top:-20px;font-size: 30px"></i>
          <el-button type="success" plain style="opacity:0.5;position: relative;
          bottom: -19px;left:-20px;width: 429px" @click="toData2">&nbsp;&nbsp;&nbsp;<i class="el-icon-position" style="font-size: 15px"></i>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-button>
        </el-card>
      </el-col>
      <el-col :span="8" >
        <el-card style="background-color: #E6A23C;width: 419px;height: 150px;border-radius: 3%">
          <h2 style="margin: 0">文件管理</h2>
          <div style="margin: 0;margin-top: 5px;color: black">File Management</div>
          <i class="el-icon-collection" style="position:relative;right: -350px;top:-20px;font-size: 30px"></i>
          <el-button type="warning" @click="toData3" plain style="opacity:0.5;position: relative;
          bottom: -19px;left:-20px;width: 429px">&nbsp;&nbsp;&nbsp;<i class="el-icon-position" style="font-size: 15px"></i>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-button>

        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8" >
        <el-card style="background-color: #F56C6C;width: 419px;height: 149px;border-radius: 3%">
          <h2 style="margin: 0">在线简聊</h2>
          <div style="margin: 0;margin-top: 5px;color: black">Chat Online</div>
          <i class="el-icon-chat-dot-round" style="position:relative;right: -350px;top:-20px;font-size: 30px"></i>
          <el-button type="danger" plain style="opacity:0.5;position: relative;
          bottom: -20px;left:-20px;width: 429px" @click="toData4">&nbsp;&nbsp;&nbsp;<i class="el-icon-position" style="font-size: 15px"></i>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-button>

        </el-card>
      </el-col>
      <el-col :span="8" >
        <el-card style="background-color: darkcyan;width: 419px;height: 149px;border-radius: 3%">
          <h2 style="margin: 0">公司地址</h2>
          <div style="margin: 0;margin-top: 5px;color: black">Company Addresse</div>
          <i class="el-icon-map-location" style="position:relative;right: -350px;top:-20px;font-size: 30px"></i>
          <el-button type="primary" plain style="opacity:0.5;position: relative;
          bottom: -19px;left:-20px;width: 429px" @click="toData5">&nbsp;&nbsp;&nbsp;<i class="el-icon-position" style="font-size: 15px"></i>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-button>

        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card style="background-color: rebeccapurple;width: 419px;height: 149px;border-radius: 3%">
          <h2 style="margin: 0;color: black">系统设置</h2>
          <div style="margin: 0;margin-top: 5px;color: black">System Management</div>
          <i class="el-icon-s-tools" style="color:black;position:relative;right: -350px;top:-20px;font-size: 30px"></i>
          <el-button type="info" @click="toData6"  plain style="opacity:0.5;position: relative;
          bottom: -19px;left:-20px;width: 429px">&nbsp;&nbsp;&nbsp;<i class="el-icon-position" style="font-size: 15px"></i>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</el-button>
        </el-card>
      </el-col>
    </el-row>
  </div>

</template>

<script>
import request from "@/utils/request";
let socket;
export default {
  name: "Home",
  data(){
    return {
      circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      user: {},
      isCollapse: false,
      users: [],
      chatUser: '',
      text: "",
      messages: [],
      content: '',
      user1: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      person:{}
    }
  },
  created() {
    this.init()
    for (let i = 0; i < this.users.length; i++) {
      this.request.get("/user/"+ this.users[i].username).then(res =>{
        if (res.code === '200'){
          this.users[i].avatarUrl = res.data.avatarUrl
          console.log(this.users+"1111111111111111111111");
        }
      })
    }
  },
  methods:{
    handleFileUploadSuccess(){

    },
    toData1(){
      this.$router.push('/role')
    },
    toData2(){
      this.$router.push('/data')
      this.$message.success('欢迎您！ '+this.user1.nickname+'')
    },
    toData3(){
      if (this.user1.role==="ROLE_ADMIN"){
        this.$router.push('/file')
        this.$message.success('欢迎您！ '+this.user1.nickname+'')
      }else {
        this.$message.error("抱歉！您暂无权限！")
      }
    },
    toData4(){
      this.$router.push('/chat')
    },
    toData5(){
      this.$router.push('/map')
       this.$message.success('欢迎您: '+this.user1.nickname+'')
    },
    toData6(){
      if (this.user1.role==="ROLE_ADMIN"){
        this.$router.push('/menu')
        this.$message.success('欢迎您！ '+this.user1.nickname+'')
      }else {
        this.$message.error("抱歉！您暂无权限！")
      }
    },
  },
}
</script>

<style>
</style>